<template>
	<view class="coupon-list">
		<!-- <view>
					我的优惠券
		</view> -->
		<view class="list">
			
			
			<view class="item"
			 v-for="item in coupon_list" >
				<view class="coupon"
					v-on:click="check_coupon( item )"
					v-bind:class="{'used':item.used=='1'}">
					<view class="con">
						<view class="amount">
						￥{{item.amount}}
					</view>
					<view class="text-use">
						<view class="text">
							

							
						</view>
						<view class="use">
							<text v-show="item.used=='1'">已使用</text>
						</view>
					</view>
					
					</view>
					
					
				</view>
				<view class="valid-time">
					优惠券:{{item.code}} 有效期：{{item.end_at?item.end_at:'长期有效'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const appInstance = getApp();
	export default {
		data() {
			return {
				origin:'',
				coupon_list:[]
			}
		},
		onLoad( options ) {
			if (options.origin) {
				this.origin = options.origin
			}
			var that = this;
			this.get_list();
			
		},
		onPullDownRefresh() {
			
			var t = this;
		    setTimeout(function () {
				t.get_list();
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			
			get_list:function(  ){
				var t = this;
				var url = '&r=coupon.get_list';
				var data = {
					// openid: 1,
				};
				
				appInstance.globalData.request(url, data, "GET", res => {
				
					t.coupon_list = res.data;
				
				});
				
			},
			
			check_coupon:function( coupon ){
				
				if (this.origin == 'order-create') {
					
					//todo 选中优惠券，并返回订单创建页面
				
					this.$u.vuex('vuex_order_coupon_id', coupon.id);					
				
					uni.navigateBack();
				
				}
				
			}
		},
		
		
	}
</script>

<style lang="less">
	.item{
		margin: 20rpx 20rpx;
		// padding-bottom:20rpx;
		border-bottom: dashed 1px #cdcdcd;
		
		.coupon {
		    position: relative;
		    width: 600rpx;
		    height: 160rpx;
		    
			
			font-size: 60rpx;
			color: #fff;
			font-weight: bold;
			line-height: 160rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			cursor: pointer;
			  
			background-image: 
				radial-gradient(
				  circle at 1rpx 8rpx, 
				  transparent 6rpx, 
				  #ff9e6d 6rpx, 
				  #ff9e6d 0rpx), 
				radial-gradient(
				  circle at 299rpx 8rpx, 
				  transparent 6rpx, 
				  #ff9e6d 6rpx, 
				  #ff9e6d 0rpx);
			background-size: 300rpx 18rpx;
			background-position: 0 0, 300rpx 0;
			background-repeat-x: no-repeat;
			
			&.used{
				background-image:
					radial-gradient(
					  circle at 1rpx 8rpx, 
					  transparent 6rpx, 
					  #b7ccc8 6rpx, 
					  #b7ccc8 0rpx), 
					radial-gradient(
					  circle at 299rpx 8rpx, 
					  transparent 6rpx, 
					  #b7ccc8 6rpx, 
					  #b7ccc8 0rpx);
			}
			&::before {
			  position: absolute;
			  content: "";
			  left: 400rpx;
			  top: 0;
			  bottom: 0;
			  width: 0;
			  border-left: 1rpx dashed #fff;
			}
			// &::after {
			//   position: absolute;
			//   content: "立即领取";
			//   font-size: 26rpx;
			//   width: 70rpx;
			//   top: 50%;
			//   right: 2%;
			//   transform: translate(-50%, -50%);
			//   line-height: 40rpx;
			//   letter-spacing: 5rpx;
			// }
			
			.con{
				display: flex;
				justify-content:space-between;
				align-items: center;
				.amount{
		
					flex:none;
				}
				.text-use{
					width:180rpx;
					flex:none;
					font-size:28rpx;
					line-height: 2;
				}
			}
			
		  }
		  
		  .valid-time{
			  line-height:2;
			  color:#886a6a;
		  }
	}

</style>
